<template>
    <el-form label-width="5.2%" style="margin: auto;">
        <el-form-item label="用户ID:">
            <div>{{ user.id }}</div>
        </el-form-item>
        <el-form-item label="账号:">
            <div>{{ user.loginAct }}</div>
        </el-form-item>
        <el-form-item label="密码:">
            <div>*****</div>
        </el-form-item>
        <el-form-item label="姓名:">
            <div>{{ user.name }}</div>
        </el-form-item>
        <el-form-item label="手机:">
            <div>{{ user.phone }}</div>
        </el-form-item>
        <el-form-item label="邮箱:">
            <div>{{ user.email }}</div>
        </el-form-item>

        <el-form-item label="账号是否未过期:">
            <div>{{ user.accountNoExpired == 1 ? '是' : '否' }}</div>
        </el-form-item>
        <el-form-item label="账号是否未锁定:">
            <div>{{ user.accountNoLocked == 1 ? '是' : '否' }}</div>
        </el-form-item>
        <el-form-item label="凭证是否未过期:">
            <div>{{ user.credentialsNoExpired == 1 ? '是' : '否' }}</div>
        </el-form-item>
        <el-form-item label="是否启用:">
            <div>{{ user.accountEnabled == 1 ? '是' : '否' }}</div>
        </el-form-item>

        <el-form-item label="创建时间:">
            <div>{{ user.createTime }}</div>
        </el-form-item>
        <el-form-item label="创建人:">
            <div>{{ user.createByDo.name }}</div>
        </el-form-item>
        <el-form-item label="更新时间:">
            <div>{{ user.editTime }}</div>
        </el-form-item>
        <el-form-item label="更新人:">
            <div>{{ user.editByDo.name }}</div>
        </el-form-item>
    </el-form>
    <el-button type="primary" plain @click="goBack">返回</el-button>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {doGet} from "@/http/httpRequest.js";
import {useRoute, useRouter} from "vue-router";
import {showMessage} from "@/util/message.js";

// 用户信息响应式对象，存储从API获取的用户详情数据
let user = ref({
    createByDo: {}, // 创建者信息对象
    editByDo: {}    // 编辑者信息对象
})

// 获取Vue Router实例，用于页面导航和路由操作
let router = useRouter();

// 页面挂载时加载用户数据
onMounted(() => {
    loadUser()
})

/**
 * 加载用户详情数据
 * 通过路由参数获取userId，调用API获取用户信息并更新到user响应式对象
 */
const loadUser = () => {
    let userId = useRoute().params.userId; // 从路由参数中获取用户ID
    doGet('/api/user/' + userId).then(resp => { // 调用GET API获取用户详情
        if (resp.data.code == 200) { // 响应成功
            user.value = resp.data.info; // 更新用户信息
            // 处理创建者信息为空的情况，避免模板渲染错误
            if (!user.value.createByDo) {
                user.value.createByDo = {}; // 若为null则初始化为空对象
            }
            // 处理编辑者信息为空的情况，避免模板渲染错误
            if (!user.value.editByDo) {
                user.value.editByDo = {}; // 若为null则初始化为空对象
            }
        } else {
            showMessage(resp.data.msg, 'error'); // 显示错误信息
        }
    })
}

/**
 * 返回上一页
 * 使用路由的back方法实现页面回退
 */
const goBack = () => {
    router.back()
}
</script>

<style scoped>
</style>